Sets the front-to-back ordering of elements
Description
The z-index property sets the front-to-back for elements.
The value for the z-index value is a number, and negative values are allowed. The smaller the value, the further to the back the element will be drawn.
This property is useful only when elements overlap.
Example
The following code demonstrates the z-index Property.
<!DOCTYPE HTML>
<html>
<head>
<style>
img {<!-- w w w.ja v a 2s. c o m-->
border: medium double black;;
background-color: lightgreay;
position: fixed;
}
#myID {
z-index: 1;
top: 15px;
left: 150px;
}
#mySecond {
z-index: 2;
top: 25px;
left: 120px;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<img id="myID" src="http://www.java2s.com/style/download.png" />
<img id="mySecond" src="http://www.java2s.com/style/download.png" />
<p>This is a test.</p>
</body>
</html>
Example 2
The following code shows how to use z-index to create layer.
<html>
<head>
<style rel="stylesheet" type="text/css">
div#layer1 {<!-- w ww .j av a2 s . c om-->
z-index: 3;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 100px;
background-color: red;
border: 1px solid #000000;
padding: 5px;
}
div#layer2 {
z-index: 2;
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid #000000;
padding: 5px;
}
div#layer3 {
z-index: 1;
position: absolute;
top: 30px;
left: 30px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid #000000;
padding: 5px;
}
</style>
</head>
<body>
<div id="layer1">
<h1>Layer One</h1>
</div>
<div id="layer2">
<h1>Layer Two</h1>
</div>
<div id="layer3">
<h1>Layer Three</h1>
</div>
</body>
</html>